<template>
    <div class="center">
        <div class="center-header">
            <template v-if="false">
                <el-select v-model="mapLocation" placeholder="请选择" class="selector">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </template>
            <div class="map-change">
                <div @click="mapChange('normal')" :class="[type==='normal' ? 'left-active':'left']">平时</div>
                <div @click="mapChange('war')" :class="[type==='war' ? 'right-active':'right']">战时</div>
            </div>
            <div class="check-total">
                <div class="hBox">
                    <div class="font-size-small font-weight-medium mr12 ml8">被监管企业总数</div>
                    <div class="font-size-x font-family-bebas ml8">{{enterpriseNum[0]? enterpriseNum[0].num || 0 : 0}}
                    </div>
                </div>
                <div class="hBox">
                    <div class="icon">
                        <div></div>
                        <div>{{enterpriseNum[1]? enterpriseNum[1].num || 0 : 0}}</div>
                    </div>
                    <div class="icon">
                        <div style="background: rgba(255,121,58,1)"></div>
                        <div>{{enterpriseNum[2]? enterpriseNum[2].num || 0 : 0}}</div>
                    </div>
                    <div class="icon">
                        <div style="background: rgba(255,211,31,1)"></div>
                        <div>{{enterpriseNum[3]? enterpriseNum[3].num || 0 : 0}}</div>
                    </div>
                    <div class="icon">
                        <div style="background: rgba(19,114,255,1)"></div>
                        <div>{{enterpriseNum[4]? enterpriseNum[4].num || 0 : 0}}</div>
                    </div>
                </div>
            </div>
            <div class="time">{{time}}</div>
            <div class="weather">
                <iframe width="300" scrolling="no" height="30" frameborder="0" hspace="0"
                        src="https://i.tianqi.com/?c=code&id=10&color=%23FFFFFF&icon=1&py=xindu&wind=1"></iframe>
            </div>
        </div>
        <div class="map-container">
            <div v-if="type==='normal'" v-for="(item,index) in mapMarker" :class="'map-'+item.class" class="map-item"
                 :key="item.name+index"
                 @mouseenter="item.hover=true" @mouseleave="item.hover=false">
                <div class="map-item"
                     :style="{'background':`url(${item.hover?item[item.status+'Active']:item[item.status]}) center /cover no-repeat`}">
                </div>
                <el-tooltip placement="right" popper-class="test">
                    <div slot="content" class="center-content center-content-tooltip">
                        <div class="title-icon title-icon-tooltip">
                            <div class="icon left-top"></div>
                            <div>低风险：{{item.blueNumber}}</div>
                        </div>
                        <div class="title-icon title-icon-tooltip">
                            <div class="icon right-top"></div>
                            <div>一般风险：{{item.yellowNumber}}</div>
                        </div>
                        <div class="title-icon title-icon-tooltip">
                            <div class="icon left-bottom"></div>
                            <div>较大风险：{{item.orangeNumber}}</div>
                        </div>
                        <div class="title-icon title-icon-tooltip">
                            <div class="icon right-bottom"></div>
                            <div>重大风险：{{item.redNumber}}</div>
                        </div>
                    </div>
                    <div class="marker" @mouseenter="item.hover=true" @mouseleave="item.hover=false">
                        <s-bar
                                :id="'svg_'+item.class"
                                v-if="item.blueNumber != null"
                                class="statistics"
                                :lowRiskCount="item.blueNumber || 0"
                                :generalRiskCount="item.yellowNumber || 0"
                                :highRiskCount="item.orangeNumber || 0"
                                :significantRisk="item.redNumber || 0"
                                :width="52"
                                :height="70"
                                :itemWidth="10"
                                :padding="4"
                        ></s-bar>
                        <div>{{item.name}}</div>
                    </div>
                </el-tooltip>

            </div>
            <div class="icon-container">
                <div v-for="(item,index) in significantRisks" :key="item.Name+index" class="significantRisks"
                     :style="{left:item.left+'px',top:item.top+'px'}"></div>
                <template v-if="type==='war'">
                    <div v-for="(item,index) in sheltersArr" :key="item.Name+index" class="shelters"
                         :style="{left:item.left+'px',top:item.top+'px'}"></div>
                </template>
                <div v-for="(item,index) in teamInfo" :key="item.Name+index" class="team-info"
                     :style="{left:item.left+'px',top:item.top+'px'}"></div>
                <template v-for="(park,parkIndex) in parkArr">

                    <el-tooltip placement="right" popper-class="test" :key="park.name+parkIndex">

                        <div slot="content" class="center-content center-content-tooltip">
                            <div>{{park.name}}</div>
                            <div class="title-icon title-icon-tooltip">
                                <div class="icon left-top"></div>
                                <div>低风险：{{park.blueNumber}}</div>
                            </div>
                            <div class="title-icon title-icon-tooltip">
                                <div class="icon right-top"></div>
                                <div>一般风险：{{park.yellowNumber}}</div>
                            </div>
                            <div class="title-icon title-icon-tooltip">
                                <div class="icon left-bottom"></div>
                                <div>较大风险：{{park.orangeNumber}}</div>
                            </div>
                            <div class="title-icon title-icon-tooltip">
                                <div class="icon right-bottom"></div>
                                <div>重大风险：{{park.redNumber}}</div>
                            </div>
                        </div>
                        <div v-if="park && type==='normal'" class="park-marker " :class="'park-position-'+parkIndex">
                            <s-bar
                                    :id="'svg_park_'+parkIndex"
                                    class="park-statistics"
                                    :lowRiskCount="park.blueNumber || 0"
                                    :generalRiskCount="park.yellowNumber || 0"
                                    :highRiskCount="park.orangeNumber || 0"
                                    :significantRisk="park.redNumber || 0"
                                    :width="22"
                                    :height="46"
                                    :itemWidth="4"
                                    :padding="2"
                            ></s-bar>
                            <!--<div>{{parkArr[0].name}}</div>-->
                        </div>
                    </el-tooltip>
                </template>

            </div>
        </div>

        <div class="center-footer">
            <div v-if="type==='normal'" class="left hBox">
                <div class="vBox column">
                    <div>总带班领导</div>
                    <div>{{govDuty.DutyLeader}}</div>
                    <div>{{govDuty.LeaderMobile}}</div>
                </div>
                <div class="vBox column">
                    <div>总带班主任1</div>
                    <div>{{govDuty.FirstDirector}}</div>
                    <div>{{govDuty.FirstMobile}}</div>
                </div>
                <div class="vBox column">
                    <div>总带班主任2</div>
                    <div>{{govDuty.SecondDirector}}</div>
                    <div>{{govDuty.SecondMobile}}</div>
                </div>
                <div class="vBox column">
                    <div>值班领导</div>
                    <div>{{govDuty1.DutyLeader}}</div>
                    <div>{{govDuty1.LeaderMobile}}</div>
                </div>
                <div class="vBox column">
                    <div>值班主任</div>
                    <div>{{govDuty1.DutyDirector}}</div>
                    <div>{{govDuty1.DirectorMobile}}</div>
                </div>
                <div class="vBox column">
                    <div>值班人员1</div>
                    <div>{{govDuty1.FirstPerson}}</div>
                    <div>{{govDuty1.FirstMobile}}</div>
                </div>
                <div class="vBox column">
                    <div>值班人员2</div>
                    <div>{{govDuty1.SecondPerson}}</div>
                    <div>{{govDuty1.SecondMobile}}</div>
                </div>

            </div>
            <div v-else class="left hBox">
                <div class="vBox team-number" v-for="(item,i) in teamData" :key="i">
                    <div>{{item.number}}</div>
                    <div>{{item.name}}</div>
                </div>
            </div>
            <div v-if="bdInfo" class="right" :style="{background: `url(${footerBackground}) no-repeat  center / contain`}">
                <div class="hBox vh-content-between">
                    <div class="hBox vh-content-start">
                        <div class="mr12 icon"></div>
                        北斗+动态感知
                    </div>
                    <div>危化领域</div>
                </div>
                <div>
                    <div>来源：金火焰</div>
                    <div>时间：{{bdTime}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import moment from "moment";
import sBar from "../components/svgs/bar";


export default {
	name: "center-map",
	data() {
		return {
			mapMarker: [
				{
					name: "清流镇",
					class: "qlz",
					hover: false,
					status: "blue",
					red: require("../assets/img/map/normal/54.png"),
					orange: require("../assets/img/map/normal/80.png"),
					yellow: require("../assets/img/map/normal/79.png"),
					blue: require("../assets/img/map/normal/53.png"),
					redActive: require("../assets/img/map/normal/82.png"),
					orangeActive: require("../assets/img/map/normal/3.png"),
					yellowActive: require("../assets/img/map/normal/2.png"),
					blueActive: require("../assets/img/map/normal/81.png")
				},
				{
					name: "新繁街道",
					class: "xfjd",
					hover: false, status: "blue",
					red: require("../assets/img/map/normal/6.png"),
					orange: require("../assets/img/map/normal/5.png"),
					yellow: require("../assets/img/map/normal/4.png"),
					blue: require("../assets/img/map/normal/75.png"),
					redActive: require("../assets/img/map/normal/10.png"),
					orangeActive: require("../assets/img/map/normal/9.png"),
					yellowActive: require("../assets/img/map/normal/8.png"),
					blueActive: require("../assets/img/map/normal/7.png")
				},
				{
					name: "军屯镇",
					class: "jtz",
					hover: false, status: "blue",
					red: require("../assets/img/map/normal/13.png"),
					orange: require("../assets/img/map/normal/12.png"),
					yellow: require("../assets/img/map/normal/11.png"),
					blue: require("../assets/img/map/normal/73.png"),
					redActive: require("../assets/img/map/normal/17.png"),
					orangeActive: require("../assets/img/map/normal/16.png"),
					yellowActive: require("../assets/img/map/normal/15.png"),
					blueActive: require("../assets/img/map/normal/14.png")
				},
				{
					name: "斑竹园镇",
					class: "bzyz",
					hover: false, status: "blue",
					red: require("../assets/img/map/normal/20.png"),
					orange: require("../assets/img/map/normal/19.png"),
					yellow: require("../assets/img/map/normal/18.png"),
					blue: require("../assets/img/map/normal/74.png"),
					redActive: require("../assets/img/map/normal/24.png"),
					orangeActive: require("../assets/img/map/normal/23.png"),
					yellowActive: require("../assets/img/map/normal/22.png"),
					blueActive: require("../assets/img/map/normal/21.png")
				},
				{
					name: "大丰街道",
					class: "dfjd",
					hover: false, status: "blue",
					red: require("../assets/img/map/normal/27.png"),
					orange: require("../assets/img/map/normal/26.png"),
					yellow: require("../assets/img/map/normal/25.png"),
					blue: require("../assets/img/map/normal/76.png"),
					redActive: require("../assets/img/map/normal/31.png"),
					orangeActive: require("../assets/img/map/normal/30.png"),
					yellowActive: require("../assets/img/map/normal/29.png"),
					blueActive: require("../assets/img/map/normal/28.png")
				},
				{
					name: "桂湖街道",
					class: "ghjd",
					hover: false, status: "blue",
					red: require("../assets/img/map/normal/58.png"),
					orange: require("../assets/img/map/normal/57.png"),
					yellow: require("../assets/img/map/normal/70.png"),
					blue: require("../assets/img/map/normal/55.png"),
					redActive: require("../assets/img/map/normal/62.png"),
					orangeActive: require("../assets/img/map/normal/61.png"),
					yellowActive: require("../assets/img/map/normal/60.png"),
					blueActive: require("../assets/img/map/normal/59.png")
				},
				{
					name: "三河街道",
					class: "shjd",
					hover: false, status: "blue",
					red: require("../assets/img/map/normal/34.png"),
					orange: require("../assets/img/map/normal/33.png"),
					yellow: require("../assets/img/map/normal/32.png"),
					blue: require("../assets/img/map/normal/77.png"),
					redActive: require("../assets/img/map/normal/38.png"),
					orangeActive: require("../assets/img/map/normal/37.png"),
					yellowActive: require("../assets/img/map/normal/36.png"),
					blueActive: require("../assets/img/map/normal/35.png")
				},
				{
					name: "新都街道",
					class: "xdjd",
					hover: false, status: "blue",
					red: require("../assets/img/map/normal/41.png"),
					orange: require("../assets/img/map/normal/40.png"),
					yellow: require("../assets/img/map/normal/39.png"),
					blue: require("../assets/img/map/normal/78.png"),
					redActive: require("../assets/img/map/normal/45.png"),
					orangeActive: require("../assets/img/map/normal/44.png"),
					yellowActive: require("../assets/img/map/normal/43.png"),
					blueActive: require("../assets/img/map/normal/42.png")
				},
				{
					name: "石板滩街道",
					class: "sbtjd",
					hover: false,
					status: "blue",
					red: require("../assets/img/map/normal/48.png"),
					orange: require("../assets/img/map/normal/47.png"),
					yellow: require("../assets/img/map/normal/46.png"),
					blue: require("../assets/img/map/normal/72.png"),
					redActive: require("../assets/img/map/normal/52.png"),
					orangeActive: require("../assets/img/map/normal/51.png"),
					yellowActive: require("../assets/img/map/normal/50.png"),
					blueActive: require("../assets/img/map/normal/49.png")
				}

			],
			parkArr: [],
			teamData: [],
			sheltersArr: [],
			govDuty: {},
			govDuty1: {},
			teamInfo: [],
            bdInfo:{},
			bdTime:'',
			type: "normal",
			significantRisks: [],
			options: [],
			mapLocation: "新都区",
			time: "",
			footerBackground: "",
			enterpriseNum: []
		};
	},
	components: {
		sBar
	},
	computed: {},
	mounted() {
		let me = this;
		me.setTime();
		me._timeInterval = setInterval(() => {
			me.setTime();
		}, 1000);
		let latArr = [30.965096, 30.676304];
		let lngArr = [104.32748, 103.903115];
		this.getPosition((latArr[0] + latArr[1]) / 2, (lngArr[0] + lngArr[1]) / 2);


		//

		this.init();

	},
	destroyed() {
		let me = this;
		clearInterval(me._timeInterval);
	},
	methods: {
		init() {
			this.getTeamData();
			this.getSignificantRisks();
			this.getOthRefuge();
			this.getSysEntRiskLevel();
			this.getGovDuty();
			this.getSysEnterpriseNum();
			this.getBDWarnData();
			// this.getOthTeam();
		},
		getBDWarnData() {
			this.$req.get(this.$url.getBDWarnData).then((res) => {
				const {code,data} = res;
				if(code===0 && Array.isArray(data)) {
					this.bdInfo = data[0] || {};
					if(this.bdInfo.WarningTime) {
						this.bdTime = moment(new Date(this.bdInfo.WarningTime)).format('yyyy-MM-DD hh:mm:ss')
					}
					let status = this.bdInfo.WarningLevel;
					switch (status) {
						case "红色预警":
							this.footerBackground = require("../assets/img/map/6.png");
							break;
						case "橙色预警":
							this.footerBackground = require("../assets/img/map/2.png");
							break;
						case "黄色预警":
							this.footerBackground = require("../assets/img/map/7.png");
							break;
						case "蓝色预警":
							this.footerBackground = require("../assets/img/map/8.png");
							break;
					}
				}
				else {
					this.$message({
						message: "获取街道检查总数信息失败",
						type: "error",
						duration: 5 * 1000
					});
				}
			});
		},
		getSysEnterpriseNum() {
			this.$req.get(this.$url.getSysEnterpriseNum).then((res) => {
				if (res.code === 0) {
					this.enterpriseNum = res.data;
				}
				else {
					this.$message({
						message: "获取监管企业数量信息失败",
						type: "error",
						duration: 5 * 1000
					});
				}
			});
		},
		getGovDuty() {
			this.$req.get(this.$url.getGovDuty).then((res) => {
				if (res.code === 0) {
					// console.log(res.data);
					this.govDuty = res.data[0] || {};
					this.govDuty1 = res.data[1] || {};
				}
				else {
					this.$message({
						message: "获取值班信息失败",
						type: "error",
						duration: 5 * 1000
					});
				}
			});
		},
		getSysEntRiskLevel() {
			this.$req.get(this.$url.getSysEntRiskLevel).then((res) => {
				if (res.code === 0) {
					console.log(res.data);
					console.log(this.mapMarker.length);
					res.data.forEach(item => {
						this.options.push({
							value: item.OrgName,
							label: item.OrgName
						});
						//产业园区图标不一样，单独处理
						if (item.OrgCode === "510114117000" || item.OrgCode === "510114118000" || item.OrgCode === "510114119000") {
							let obj = {
								name: item.OrgName
							};
							obj.blueNumber = item.items[0] ? +item.items[0].num : 0;
							obj.yellowNumber = item.items[1] ? +item.items[1].num : 0;
							obj.orangeNumber = item.items[2] ? +item.items[2].num : 0;
							obj.redNumber = item.items[3] ? +item.items[3].num : 0;
							this.parkArr.push(obj);
						}
						this.mapMarker.forEach(marker => {

							if (item.OrgName.indexOf(marker.name.slice(0, 3)) > -1) {
								marker.blueNumber = item.items[0] ? +item.items[0].num : 0;
								marker.yellowNumber = item.items[1] ? +item.items[1].num : 0;
								marker.orangeNumber = item.items[2] ? +item.items[2].num : 0;
								marker.redNumber = item.items[3] ? +item.items[3].num : 0;
								if (marker.redNumber > 0) {
									marker.status = "red";
								}
								else if (marker.orangeNumber > 0) {
									marker.status = "orange";
								}
								else if (marker.yellowNumber > 0) {
									marker.status = "yellow";
								}
								else {
									marker.status = "blue";
								}
							}
						});
					});
				}
				else {
					this.$message({
						message: "获取各个街道 风险等级数量失败",
						type: "error",
						duration: 5 * 1000
					});
				}
			});
		},
		getOthRefuge() {
			this.$req.get(this.$url.getOthRefuge).then((res) => {
				if (res.code === 0) {
					this.sheltersArr = res.data;
					this.sheltersArr.forEach(item => {
						let position = this.getPosition(item.Lat, item.Lng);
						item.left = position.left;
						item.top = position.top;
					});
				}
				else {
					this.$message({
						message: "获取应急避难场所信息失败",
						type: "error",
						duration: 5 * 1000
					});
				}
			});
		},
		getOthTeam() {
			this.$req.get(this.$url.getOthTeam).then((res) => {
				if (res.code === 0) {
					this.teamInfo = res.data;
					this.teamInfo.forEach(item => {
						let position = this.getPosition(item.Lat, item.Lng);
						item.left = position.left;
						item.top = position.top;
					});
				}
				else {
					this.$message({
						message: "获取应急队伍信息失败",
						type: "error",
						duration: 5 * 1000
					});
				}
			});
		},
		getSignificantRisks() {
			this.$req.get(this.$url.getSignificantRisks).then((res) => {
				if (res.code === 0) {
					this.significantRisks = res.data;
				}
				else {
					this.$message({
						message: "获取重大风险的企业信息失败",
						type: "error",
						duration: 5 * 1000
					});
				}
			});
		},
		getTeamData() {
			this.$req.get(this.$url.teamNumber).then((res) => {
				if (res.code === 0) {
					this.teamData = res.data;
				}
				else {
					this.$message({
						message: "专家队伍信息获取失败",
						type: "error",
						duration: 5 * 1000
					});
				}
			});
		},
		getPosition(lat, lng) {
			let latArr = [30.965096, 30.676304];
			let lngArr = [104.32748, 103.903115];
			let container = document.querySelector(".icon-container");
			let width = container.offsetWidth;
			let height = container.offsetHeight;

			let scaleLat = latArr[0] - latArr[1];
			let scaleLng = lngArr[0] - lngArr[1];

			let top = height * (latArr[0] - lat) / scaleLat;
			let left = width * (lng - lngArr[1]) / scaleLng;
			return {
				top,
				left
			};
		},
		mapChange(type) {
			this.type = type;
			// if (type === "normal") {
			// }
			// else {
			//
			// }
		},
		setTime() {
			let nowTime = new Date();
			let date = moment(nowTime).format("YYYY年MM月DD日");
			let time = moment(nowTime).format("HH:mm:ss");
			let week = moment(nowTime).day();
			switch (week) {
				case 1:
					week = "星期一";
					break;
				case 2:
					week = "星期二";
					break;
				case 3:
					week = "星期三";
					break;
				case 4:
					week = "星期四";
					break;
				case 5:
					week = "星期五";
					break;
				case 6:
					week = "星期六";
					break;
				case 0:
					week = "星期日";
					break;
				default:
					break;
			}
			this.time = date + "  " + week + "  " + time;
		}

	}
};
</script>

<style lang="scss">
    .el-tooltip__popper[x-placement^=right] .popper__arrow {
        border-right-color: #082155 !important;
    }

    .el-tooltip__popper[x-placement^=right] .popper__arrow:after {
        border-right-color: #082155 !important;
    }

    .test {
        background: #082155 !important;
    }

    .center-content {
        width: 200px;
        height: 60px;
        padding-left: 15px;
        font-size: 10px;
        display: flex;
        flex-wrap: wrap;
        color: #fff;
        .title-icon {
            width: 50%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .icon {
                width: 10px;
                height: 10px;
                margin-right: 6px;
                border-radius: 50%;
                box-shadow: 0px 0px 8px 0px #007bff;
            }
            .left-top {
                background: #007bff;
                border: 1px solid #005eff;
            }
            .left-bottom {
                background: #ff732e;
                border: 1px solid #ff732e;
            }
            .right-top {
                background: #ffd600;
                border: 1px solid #ffd600;
            }
            .right-bottom {
                background: #ff5e54;
                border: 1px solid #ff5e54;
            }
        }
    }

    .center-content-tooltip {
        width: 120px;
        height: 100px;
        padding-left: 0;
        .title-icon-tooltip {
            width: 100%;
        }
    }

    .center {
        width: 1240px;
        height: 780px;
        background: url("../assets/img/18.png") center /contain no-repeat;
        position: absolute;
        z-index: 100;
        top: 38px;
        left: 50%;
        transform: translate(-50%, 0);
        .center-header {
            position: absolute;
            top: 79px;
            width: 100%;
            z-index: 200;
            .selector {
                position: absolute;
                left: 107px;
            }
            .map-change {
                width: 203px;
                display: flex;
                justify-content: space-between;
                margin: 0 auto;
                > div {
                    width: 95px;
                    height: 30px;
                    line-height: 30px;
                    cursor: pointer;
                    font-size: 16px;
                    opacity: 0.8;
                }
                > div:first-child {
                    text-align: right;
                    padding-right: 15px;
                }
                > div:last-child {
                    text-align: left;
                    padding-left: 15px;
                }
                .left {
                    background: url("../assets/img/22.png") center /contain no-repeat;
                }
                .left-active {
                    background: url("../assets/img/24.png") center /contain no-repeat;
                }
                .right {
                    background: url("../assets/img/23.png") center /contain no-repeat;
                }
                .right-active {
                    background: url("../assets/img/21.png") center /contain no-repeat;
                }
            }

            .check-total {
                width: 215px;
                height: 62px;
                background: url("../assets/img/26.png") center /contain no-repeat;
                position: absolute;
                top: 0;
                left: 80px;
                font-size: 12px;
                font-weight: 400;
                text-align: left;
                color: #ffffff;
                padding-left: 20px;
                letter-spacing: 0px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                .icon {
                    display: flex;
                    align-items: center;
                    margin-right: 10px;
                    > div:first-child {
                        width: 8px;
                        height: 8px;
                        border-radius: 50%;
                        background: rgba(234, 71, 71, 1);
                        margin-right: 5px;
                    }
                }
            }
            .time {
                width: 300px;
                height: 40px;
                background: url("../assets/img/6.png") center /contain no-repeat;
                position: absolute;
                top: 0;
                right: 116px;
                font-size: 12px;
                font-weight: 400;
                text-align: left;
                color: #ffffff;
                line-height: 40px;
                padding-left: 10px;
                letter-spacing: 0px;
            }
            .weather {
                width: 300px;
                height: 35px;
                background: linear-gradient(90deg, rgba(0, 76, 188, 1), rgba(0, 65, 191, 0));
                position: absolute;
                top: 40px;
                right: 116px;
                font-size: 12px;
                font-weight: 400;
                text-align: left;
                color: #ffffff;
                line-height: 35px;
                padding-left: 10px;
                padding-top: 3px;
                letter-spacing: 0px;
            }
        }

        .center-footer {
            position: absolute;
            bottom: 77px;
            /*left: 106px;*/
            display: flex;
            justify-content: center;
            width: 1240px;

            .left {
                margin-right: 20px;

                .column {
                    margin-right: 6px;
                    > div {
                        width: 120px;
                        height: 30px;
                        opacity: 0.5;
                        background: rgba(0, 69, 202, 0.4);
                        margin-top: 6px;
                        text-align: center;
                        line-height: 30px;
                    }
                    & > div:first-child {
                        background: rgba(0, 69, 202, 0.4);
                        border: 1px solid #0045ca;
                        opacity: 1;
                        margin-top: 0;
                    }
                }
                /*> div:first-child {*/
                /*> div {*/
                /*width: 200px;*/
                /*}*/
                /*}*/
                /*> div:nth-child(2) {*/
                /*> div {*/
                /*width: 160px;*/
                /*}*/
                /*}*/

                .team-number {
                    margin-right: 6px;
                    width: 180px;
                    height: 101px;
                    background: rgba(0, 69, 202, 0.4);
                    border: 1px solid #0045ca;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    > div:first-child {
                        height: 30px;
                        font-size: 40px;
                        font-family: BebasNeue;
                        text-align: center;
                        color: #ffffff;
                        line-height: 30px;
                        letter-spacing: 0px;
                    }
                    > div:last-child {
                        margin-top: 10px;
                        height: 22px;
                        font-size: 16px;
                        font-weight: 400;
                        text-align: center;
                        color: #ffffff;
                        line-height: 22px;
                        letter-spacing: 1px;
                    }
                }
            }

            .right {
                width: 267px;
                height: 103px;
                padding-left: 10px;

                font-size: 14px;
                font-weight: 400;
                text-align: left;
                color: #ffffff;
                line-height: 20px;
                letter-spacing: 0px;
                text-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
                > div:first-child {
                    height: 30px;
                    line-height: 30px;
                    margin-bottom: 8px;
                    padding-right: 8px;
                }
                > div:last-child {
                    height: 60px;
                    > div {
                        height: 30px;
                        line-height: 30px;
                    }
                }

            }
        }

        .map-container {
            position: absolute;
            width: 937px;
            height: 426px;
            left: 145px;
            top: 163px;
            background: url("../assets/img/map/normal/71.png") center /contain no-repeat;
            .icon-container {
                width: 924px;
                height: 392px;
                position: absolute;
                left: 7px;
                top: 11px;
                /*background: rgba(0, 0, 0, 0.5);*/
                .significantRisks {
                    width: 35px;
                    height: 53px;
                    position: absolute;
                    z-index: 501;
                    background: url("../assets/img/map/4.png") no-repeat center /contain;
                    transform: translate(-50%, -100%);
                }
                .shelters {
                    width: 35px;
                    height: 53px;
                    position: absolute;
                    z-index: 500;
                    background: url("../assets/img/map/3.png") no-repeat center /contain;
                    transform: translate(-50%, -100%);
                }
                .park-marker {
                    width: 64px;
                    height: 40px;
                    position: absolute;
                    z-index: 1000;
                    background: url("../assets/img/map/9.png") no-repeat center /contain;
                    .park-statistics {
                        position: absolute;
                        left: 50%;
                        top: -80%;
                        transform: translate(-50%, 0);
                    }
                }
                .park-position-0 {
                    left: 25%;
                    top: 35%;
                }
                .park-position-1 {
                    left: 50%;
                    top: 50%;
                }
                .park-position-2 {
                    left: 62%;
                    top: 51%;
                }
                .teams-info {
                    position: absolute;
                    z-index: 500;
                    width: 12px;
                    height: 12px;
                    background: #1372ff;
                    border: 1px solid #0045ca;
                    border-radius: 50%;
                    transform: translate(-50%, -100%);
                }
            }
            .map-item {
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 200;

                .map-item {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                }
                .marker {
                    position: absolute;
                    z-index: 700;
                    .statistics {
                        position: absolute;
                        top: -52px;
                        left: 50%;
                        transform: translate(-50%, 0);
                        z-index: 800;
                        height: 70px;
                        width: 52px;

                    }

                    > div:last-child {
                        width: 90px;
                        height: 58px;
                        display: flex;
                        align-items: flex-end;
                        justify-content: center;
                        color: rgba(255, 255, 255, 0.6);
                        background: url("../assets/img/map/1.png") top /contain no-repeat;
                    }
                }
            }
            .map-sbtjd {
                width: 361px;
                height: 141px;
                left: 567px;
                top: 258px;
                z-index: 508
            }
            .map-xdjd {
                width: 254px;
                height: 144px;
                left: 541px;
                top: 146px;
                z-index: 507
            }
            .map-shjd {
                width: 185px;
                height: 79px;
                left: 438px;
                top: 240px;
                z-index: 506
            }
            .map-ghjd {
                width: 238px;
                height: 112px;
                left: 446px;
                top: 142px;
                z-index: 505
            }
            .map-dfjd {
                width: 144px;
                height: 74px;
                left: 280px;
                top: 239px;
                z-index: 504
            }
            .map-bzyz {
                width: 271px;
                height: 126px;
                left: 302px;
                top: 123px;
                z-index: 503
            }
            .map-jtz {
                width: 312px;
                height: 72px;
                left: 311px;
                top: 68px;
                z-index: 502
            }
            .map-qlz {
                width: 289px;
                height: 81px;
                left: 107px;
                top: 7px;
                z-index: 501
            }
            .map-xfjd {
                width: 352px;
                height: 178px;
                left: 11px;
                top: 60px;
                z-index: 500
            }
        }

    }
</style>